<template>
  <base-popup :show="show" @close="closeModel(true)">
    <view class="popup">
      <!-- <view v-show="maskType == 'redPacket'" v-if="redPacketList.length" class="maskContainer couponMask"> -->
      <view v-if="redPacketList.length" class="maskContainer couponMask">
        <view class="couponContainer2">
          <view class="title">选择现金红包</view>
          <view class="coupnItemScroll">
            <view class="coupnItemBox">
              <scroll-view scroll-y="true" class="scroll-Y">
                <view v-for="(item, index) in redPacketList" :key="index" class="couponItem packetItem" @click="selectPacket(item, 'redPacket')">
                  <view class="quota">
                    <view class="o-b"><text class="-small">¥</text>{{ item.price }}</view>
                  </view>
                  <view class="descripe">
                    <view class="o-p">{{ '现金红包' }}</view>
                    <view class="o-span">{{ _parseTime(new Date(item.use_start_time * 1000), '{y}-{m}-{d}') }} - {{ _parseTime(new Date(item.use_stop_time * 1000), '{y}-{m}-{d}') }}</view>
                  </view>
                  <view class="coupnStateBox">
                    <view v-if="selectedPacket && item.hongbao_id === selectedPacket.hongbao_id" class="couponChecked">
                      <image src="/static/images/icon/coupon_checked.png" />
                    </view>
                    <view v-else class="couponChecked">
                      <image src="/static/images/icon/coupon_check.png" />
                    </view>
                  </view>
                </view>
              </scroll-view>
              <view class="fixed" @click="closeModel(false)">
                <view class="descripe2" style="align-items: center;">
                  <view>不使现金红包</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </base-popup>
</template>

<script>
import BasePopup from '@/components/base/base-popup'
import { parseTime } from '@/utils/tools'
import './index.scss'
export default {
  components: {
    BasePopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    redPacketList: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedPacket: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    _parseTime(time, par) {
      return parseTime(time, par)
    },
    selectPacket(data) {
      this.$emit('selectPacket', { item: data, type: 'redPacket' })
    },
    closeModel(flag) {
      this.$emit('close', { item: {}, type: 'redPacket', isClose: flag })
    }
  }
}
</script>
<style lang="scss">

</style>
